<template>
  <div class="crux_box">
    <div class="crux" v-if="signalsRadio1.title.title != ''">
      <div class="byword">
        关键词
        <span class="hinge" v-if="signalsRadio1.title.title != ''">{{
          signalsRadio1.title.title
        }}</span
        >为您找到<span>{{ signalsRadio1.dataLiss.count }}</span
        >条标讯
      </div>
      <div class="subscribe">一键订阅</div>
    </div>
    <div style="padding: 0 20px">
      <div
        class="crux_cent"
        v-for="item in signalsRadio1.dataLiss?.list"
        :key="item.cityid"
      >
        <div class="crux_top">
          <span class="caption">{{ item.tags[0] }}</span>
          <span
            v-html="item.title"
            class="neglect"
            @click="nameClick(item.nid)"
          ></span>
          <!-- <span class="logo">
                        <img style="margin-right: 6px;" width="12px" height="14px" src="@/assets/img/shu.png" alt="">
                        获取标书剩余5天
                    </span> -->
        </div>
        <div class="crux_bth">
          <div class="crux_bth_one">
            <div class="crux_bth_zb" v-if="item.xmdw != ''">
              <span class="active">招标公司</span>{{ item.xmdw }}
            </div>
            <div class="crux_bth_zhb" v-if="item.zbdw != ''">
              <span class="active">中标公司</span>{{ item.zbdw }}
            </div>
          </div>
          <div class="crux_bth_two">
            <div class="address">
              <img
                style="width: 20px; margin-right: 5px"
                src="@/assets/img/dz.png"
                alt=""
              />{{ diqu(item.provinceid) }}
            </div>
            <div class="timing">
              <img
                style="width: 20px; margin-right: 5px"
                src="@/assets/img/sj.png"
                alt=""
              />
              {{ timestamp(item.dl_posttime) }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <Pagination />
  </div>
</template>

<script setup>
import Pagination from "@/components/pagination/index.vue";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { timestamp, diqu } from "@/utils/index";

import { useRadio1Store } from "@/pain/search/search";
const signalsRadio1 = useRadio1Store();

signalsRadio1.getsearch();
onMounted(() => {});

const router = useRouter();
const nameClick = (id) => {
  router.push({
    path: `/searchInfo/${id}`,
  });
};
</script>

<style lang="scss" scoped>
.crux_box {
  background-color: #fff;
  min-height: 1000px;
}

.active {
  color: #a9b1be;
  margin-right: 10px;
}

.crux {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #eeeeee;

  .byword {
    font-weight: 500;

    .hinge {
      margin: 0 10px;
      padding: 5px 12px;
      background-color: #ffe2e2;
      color: #ff4848;
      border-radius: 4px;
    }
  }

  .subscribe {
    width: 90px;
    height: 30px;
    background-color: #fe8d03;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
  }
}

.crux_cent {
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;

  .crux_top {
    display: flex;
    align-items: center;

    .caption {
      font-size: 14px;
      padding: 2px 12px;
      margin-right: 10px;
      background-color: #6675ff;
      border-radius: 4px;
      color: #ffffff;
    }

    .neglect {
      width: 900px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logo {
      display: flex;
      align-items: center;
      width: 156px;
      height: 24px;
      background: url("../../../../assets/img/biaoxun.png") no-repeat;
      background-size: 156px 24px;
      font-weight: 600;
      margin-left: 10px;
      padding-left: 15px;
      font-size: 14px;
      color: #eeeeee;
    }
  }

  .crux_bth {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;

    .crux_bth_one {
      display: flex;
      font-size: 14px;

      .crux_bth_zb {
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .crux_bth_zhb {
        margin-left: 80px;
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .crux_bth_two {
      display: flex;
      font-size: 14px;

      .address {
        margin-right: 20px;
      }
    }
  }
}
</style>
